<template>
	<view >
		<view class="">
			<view class="blogger__item">
				<view class="view-bg-color item-d">
				<!-- 头像名称 -->
				<view class="d-flex a-center j-sb">
					<view class="justify__author__info">
						<view class="d-flex j-center">
							<view class="d-flex a-center j-center">
								<view class="">
									<view class="tn-avatar--circle tn-avatar--lg tn-avatar">
										<image class="tn-avatar__img  tn-avatar__img--circle" :src="head"></image>
									</view>
								</view>
								<view class="tn-text-ellipsis tn-padding-right">
									<view class="font-size32 tn-padding-left-sm tn-padding-right">
										<text class="font-weight7 view-title1-color">如花的旋律</text>
										<text class="dk-lv">LV 1</text>
									</view>
									<view class="tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-color-gray">2022-09-22 15:12:04</view>
								</view>
							</view>
						</view>
					</view>
					<view class="blogger__author__btn j-center a-center">
						<u-button icon="star" text="关注" class="guanzhu tn-bg-yellow tn-color-black font-weight7 tn-round"></u-button>
					</view>
				</view>
				<!-- 标签 -->
				<view class="d-flex j-start tn-margin-top">
					<view>
						<view class="tn-round tn-float-left font-weight7 font-size24 tn-bg-gray--light blogger__desc__labeldd">
							<text class="blogger__desc__label--prefix">#</text>
							<text class="font-weight7 font-size24">为什么恋爱会让人降智</text>
						</view>
						<view class="tn-round tn-float-left font-weight7 font-size24 tn-bg-gray--light blogger__desc__labeldd">
							<text class="blogger__desc__label--prefix">#</text>
							<text class="font-weight7 font-size24">为什么玩得好的人学得也好</text>
						</view>
						<view class="tn-round tn-float-left font-weight7 font-size24 tn-bg-gray--light blogger__desc__labeldd">
							<text class="blogger__desc__label--prefix">#</text>
							<text class="font-weight7 font-size24">谈恋爱长相重要吗</text>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="tn-margin-top-sm">
					<view class="blogger__content__data">
						<u-read-more ref="uReadMore" :toggle="true" showHeight="100" textIndent="0">
							<!-- <u-parse :content="content" @load="load"></u-parse> -->
								<rich-text :nodes="content"></rich-text>
						</u-read-more>
					</view>
				</view>
				<view class="tn-padding-top-xs">
					<view class="tn-grid">
						<view class="tn-grid-item" v-for="(item,index) in iamges">
							<view class="tn-grid-item__box">
								<image mode="aspectFill" :src="item" class="blogger__main-image blogger__main-image--3"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 功能 -->
				<view class="d-flex a-center j-sb tn-margin-top-xs">
					<view class="tn-text-center tn-color-gray">
						<view class="d-flex a-center">
							<u-icon name="eye-fill" size="16"></u-icon>
							<text class="tn-padding-right">15</text>
							<u-icon name="chat" size="16"></u-icon>
							<text class="tn-padding-right">5</text>
							<u-icon name="thumb-up" size="16"></u-icon>
							<text class="">2</text>
						</view>
					</view>
					<view class="d-flex a-center">
						<text class="tn-color-gray">2人</text>
					</view>
				</view>
				</view>
			</view>
			<view class="d-flex j-sb gl">
				<view class="tn-text-center mx-10 my-10 tn-flex-1">
					<u-button icon="thumb-up-fill" text="点赞" class="font-weight7 tn-bg-yellow gn"></u-button>
				</view>
				<view class="tn-text-center mx-10 my-10 tn-flex-1">
					<u-button icon="share" text="分享" class="font-weight7 tn-bg-yellow gn"></u-button>
				</view>
			</view>
			<view class="d-flex j-sb tn-margin-top-xs">
				<view class="font-weight7 mx-30 my-30">
					最新评论
					<text class="tn-padding-xs">（2）</text>
				</view>
			</view>
			<view class="mx-30 my-30" style="padding-bottom: 120rpx;">
				<view class="view-bg-color item-d">
				<!-- 一级评论列表 -->
				<view class="" v-for="(item,index) in 3">
					<view class="d-flex a-center j-sb tn-margin-top-xl">
						<view class="">
							<view class="d-flex a-center j-start">
								<view class="logo-pic tn-shadow">
									<view class="logo-image">
										<image :src="plh" class="tn-avatar__img  tn-avatar__img--circle"></image>
									</view>
								</view>
								<view class="tn-padding-left-sm tn-padding-right">
									<view class="font-weight7 tn-padding-right tn-color-black">且听风铃</view>
									<view class="tn-color-gray tn-padding-right tn-text-ellipsis">2022-09-24 21:34:30</view>
								</view>
							</view>
						</view>
						<view class="tn-color-gray j-center a-center">
							<view class="tn-text-center">
								<u-icon name="thumb-up-fill" size="16"></u-icon>
							</view>
							<view class="tn-text-center">
								<text>0</text>
							</view>
						</view>
					</view>
					<view class="" style="margin: 10px 15px 15px 41px;">
						<text>太好看的了吧</text>
					</view>
					
					<!-- 评论回复 -->
					<view class="px-20 py-20 tn-bg-gray--light hf">
						<view class="">
							<text class="tn-padding-right-xs tn-color-gray">且听风铃:</text>
							<text class="font-weight7">回复/</text>
							<text class="tn-color-gray">:且听风铃</text>
							<text class="">可以啊</text>
						</view>
						<view class="tn-margin-top-xs d-flex j-sb">
							<view class="tn-color-gray ">2022-09-24 21:13:42</view>
							<view class="tn-color-gray">
								<u-icon name="thumb-up-fill" size="16"></u-icon>
							</view>
						</view>
					</view>
					<view class="px-20 py-20 tn-bg-gray--light hf">
						<view class="">
							<text class="tn-padding-right-xs tn-color-gray">且听风铃 :</text>
							<!-- <text class="font-weight7">回复/</text> -->
							<text class="">可以啊</text>
						</view>
						<view class="tn-margin-top-xs d-flex j-sb">
							<view class="tn-color-gray ">2022-09-24 21:13:42</view>
						</view>
					</view>
					<!-- end -->
				</view>
				</view>
				<!-- end -->
			
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:1,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				circular: true,
				lunboData: [],
				baseUrl: this.$baseUrl,
				page: 1,
				limit: 10,
				ip:'',
				is:1,
				pid:1,
				scrollTop: 0,
				head:'/static/bg/head1.png',
				plh:'/static/bg/head.png',
				iamges:[
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png',
					'/static/banner/banner4.png'
				],
				scrollTop: 0,
				content:'浔阳江头夜送客，枫叶荻花秋瑟瑟。'
			}
		},
		load() {
			this.$refs.uReadMore.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.tn-color-grey{
		color: #78909c;
	}
	.tn-padding-xs{
		padding: 10rpx;
	}
	.tn-strip-bottom{
		width: 100%;
		border-bottom: 10px solid hsla(0,0%,94.5%,.8);
	}
	.tn-text-center{
		text-align: center;
	}
	.tn-color-gray--dark{
		color: #838383!important;
	}
	.tn-color-gray{
		color: #aaa!important;
	}
	.tn-bg-yellow{
		background-color: #fff420!important;
	}
	.tn-color-black{
		color: #000!important;;
	}
	.tn-padding-top-xs{
		padding-top: 10rpx;
	}
	.tn-margin-bottom{
		margin-bottom: 30rpx;
	}
	.tn-margin-top{
		margin-top: 30rpx;
	}
	.tn-margin-top-sm{
		margin-top: 20rpx;
	}
	.blogger__item{
		padding: 30rpx;
	}
	.item-d{
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.tn-text-ellipsis {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.tn-padding-right{
		padding-right: 30rpx;
	}
	.tn-padding-left-sm{
		padding-left: 20rpx;
	}
	.dk-lv{
		background-image: repeating-linear-gradient(45deg,#892fe8,#5f4fd9);
		border-radius: 5000rpx!important;
		font-size: 24rpx;
		padding: 2rpx 20rpx;
		margin: 10rpx;
		color: #fff;
	}
	.tn-avatar--circle{
	    border-radius: 50%;
	}
	.tn-avatar__img{
	    width: 100%;
	    height: 100%;
		border-radius: 50%;
	}
	.tn-avatar--lg{
	    width: 100rpx !important;
	    height: 100rpx !important;
	}
	.tn-avatar{
	    display: inline-flex;
	    margin: 0;
	    padding: 0;
	    text-align: center;
	    align-items: center;
	    justify-content: center;
	    background-color: #e6e6e6;
	    white-space: nowrap;
	    position: relative;
	    width: 66rpx;
	    height: 66rpx;
	    z-index: 1;
	}
	.tn-main-gradient-orangered--reverse {
	    background-image: repeating-linear-gradient(-45deg,#ff7043,#e83a30);
	    color: #fff;
	}
	.tn-color-white {
	    color: #fff!important;
	}
	.tn-round {
	    border-radius: 2620px!important;
	}
	.tj{
		padding: 0px 20rpx;
		font-size: 24rpx;
		height: 36rpx;
		margin: 10rpx 0 0 10rpx;
		width: auto;
	}
	.dk-top-10 {
	    margin-top: 8rpx;
	}
	.tn-text-content {
	    line-height: 1.6;
	}
	.tn-text-ellipsis-3 {
	    display: -webkit-box;
	    overflow: hidden;
	    white-space: normal!important;
	    text-overflow: ellipsis;
	    word-wrap: break-word;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	}
	.tn-color-blue{
		color: #3d7eff!important;
	}
	.tn-grid{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	.tn-grid-item{
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-direction: column;
		width: 30%;
		margin: 5px;
	}
	.tn-grid-item__box{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	    flex: 1;
	    width: 100%;
	    height: 100%;
	}
	.blogger__main-image{
		border-radius: 16rpx;
	}
	.blogger__main-image--3{
	    height: 212rpx;
	    width: 100%;
	}
	.tn-margin-top-xs{
		margin-top: 10rpx;
	}
	.plh{
		margin-right: 10rpx;
		margin-left: 20rpx;
	}
	.tn-avatar-group__item{
		position: relative;
	}
	.tn-avatar--sm{
	    width: 50rpx;
	    height: 50rpx;
	}
	.plhs{
		background: rgba(255, 255, 255, 0.4);
		border: 2px solid rgba(0, 0, 0, 0.1);
		margin-left: -40rpx;
	}
	.blogger__author__btn{
		margin-right: -12rpx;
		padding: 0 20rpx;
	}
	.guanzhu{
		border: none;
		padding: 10rpx 24rpx;
	}
	.tn-float-left{
		float: left;
	}
	.tn-bg-gray--light{
		background-color: #f8f7f8!important;
	}
	.blogger__desc__labeldd{
		padding: 8rpx 12rpx;
		margin: 10rpx 18rpx 0 0;
	}
	.blogger__desc__label--prefix{
		color: #00ffc8;
		padding-right: 5px;
	}
	.blogger__content__data{
		line-height: 48rpx;
		text-align: justify;
		overflow: hidden;
		transition: all .25s ease-in-out;
	}
	.tn-flex-1{
		flex: 1;
	}
	.gl{
		margin: 40rpx 0px 62rpx;
	}
	.tn-margin-top-xl{
		margin-top: 52rpx;
	}
	.tn-text-ellipsis{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.logo-pic{
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		box-shadow: 0px 0px 82rpx 0px rgba(0,0,0,.15);
		border-radius: 50%;
		overflow: hidden;
	}
	.logo-image{
	    width: 62rpx;
	    height: 62rpx;
	    position: relative;
	}
	.gn{
		border: none;
		padding: 40rpx 0;
		font-size: 28rpx;
		height: 66rpx;
		width: 90%;
		box-shadow: rgba(255, 240, 13, 0.063) 6rpx 6rpx 8rpx;
	}
	.hf{
		margin: 8rpx 30rpx 8rpx 82rpx;
		border-radius: 10rpx;
	}
	.tn-padding-right-xs{
		padding-right: 10rpx;
	}
</style>